<template>
	<view style="display: flex;flex-direction: column;">
		<view class="tab fl" style="width: 100%;background-color: #FFFFFF; display: flex;justify-content: space-around;height: 60rpx;line-height: 60rpx;">
			<text v-for="(item,i) in tabs" :key="i" :data-id="i" class="tit" :data-type='item.type' :class="{'cur': tabCur == i}"
			 @tap="tabSelect">{{item.name}}
				<!-- <text :class="tabCur==0?'cur_sp1':'cur_sp2'"></text> -->
			</text>
		</view>
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->

		<!-- <service-list ref="mescrollItem" :i="0" :index="tabCur"></service-list> -->
		<mescroll-body top="150" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
		 :up="upOption">
			<view class="ticket" v-if="tabCur == 0">
				<view class="list padd_32" v-for="item in ticket.canuse" :key='item.id'>
					<view class="fl">
						<!-- <view class="title">{{ticket_index}}-{{index}}-{{ticket_index + '' === index + ''}}</view> -->
						<view class="title">
							<view>{{item.enterpriseName||'通用优惠券'}}</view>
							<!-- 分享优惠券 -->
							<!-- <button v-if="item.count" class="share" :data-id='item.id' open-type="share">
								<image src="../../../static/images/share-bai.png"></image>
							</button> -->
						</view>
						<view class="time">{{item.endDatetime}}到期</view>
						<!-- <view class="time">剩余可用：{{item.count}}张</view> -->
					</view>
					<view class="fl" style="display: flex;align-items: center;justify-content: space-between;">
						<view>
							<view>满{{item.limitation}}</view>
							<view style="margin-top: 0rpx;">减<text style="font-size: 60rpx;font-weight: 500;">{{item.price}}</text></view>
						</view>
						<view class="use"  @click="use(item)">
							去使用
						</view>
					</view>
				</view>
			</view>
			<view v-if="goods.length==0" class="none">
				<view class="none-body">
					<cover-image class="none-image" src="../../../static/images/null.png"></cover-image>
					<view class="none-text">暂无数据</view>
				</view>
			</view>

			<view class="ticket" v-if="tabCur == 1">
				<view class="list padd_32" v-for="item in ticket.isuse" :key='item.id'>
					<view class="fl">
						<!-- <view class="title">{{ticket_index}}-{{index}}-{{ticket_index + '' === index + ''}}</view> -->
						<view class="title">
							<view>{{item.enterpriseName||'通用优惠券'}}</view>
							<!-- 分享优惠券 -->
							<!-- <button v-if="item.count" class="share" :data-id='item.id' open-type="share">
																<image src="../../../static/images/share-bai.png"></image>
															</button> -->
						</view>
						<view class="time">{{item.endDatetime}}到期</view>
						<!-- <view class="time">剩余可用：{{item.count}}张</view> -->
					</view>
					<view class="fl">
						<view>满{{item.limitation}}</view>
						<view style="margin-top: 0rpx;">减<text style="font-size: 60rpx;font-weight: 500;">{{item.price}}</text></view>
					</view>
				</view>
			</view>
			<view class="ticket" v-if="tabCur == 2">
				<view class="list padd_32" v-for="item in ticket.canotuse" :key='item.id'>
					<view class="fl">
						<!-- <view class="title">{{ticket_index}}-{{index}}-{{ticket_index + '' === index + ''}}</view> -->
						<view class="title">
							<view>{{item.enterpriseName||'通用优惠券'}}</view>
							<!-- 分享优惠券 -->
							<!-- <button v-if="item.count" class="share" :data-id='item.id' open-type="share">
																<image src="../../../static/images/share-bai.png"></image>
								</button> -->
						</view>
						<view class="time">{{item.endDatetime}}到期</view>
						<!-- <view class="time">剩余可用：{{item.count}}张</view> -->
					</view>
					<view class="fl">
						<view>满{{item.limitation}}</view>
						<view style="margin-top: 0rpx;">减<text style="font-size: 60rpx;font-weight: 500;">{{item.price}}</text></view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 可用列表 -->
		<!-- end -->

		<!-- 不可用列表 -->
		<!-- <view class="list padd_32" v-for="item in ticket.canotuse" :key='item.id'>
			<view class="card clearfix">
				<view class="price fl">
					￥
					<text>{{item.price}}</text>
				</view>
				<view class="cont fl">
					<view>{{item.enterpriseName}}</view>
					<view class="time">{{item.endDatetime}}到期</view>
					<view class="state state_ex">不可使用</view>
				</view>
				<image src="/static/images/middle_discounts_normal.png" mode="widthFix"></image>
			</view>
		</view> -->
		<!-- end -->
	</view>
	</view>
</template>

<script>
	import PublicHeader from '@/components/PublicHeader.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import app from "@/App.vue"
	export default {
		computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader

		},
		data() {
			return {
				title: '卡券',
				ticket: [],
				ticketId: '',
				id: '',
				sid: '',
				num: 100, //存储的数量限制
				tabCur: '0',
				tabs: [{
					name: '未使用',
					type: 'em'
				}, {
					name: '已使用',
					type: 'package'
				}, {
					name: '已过期',
					type: 'en'
				}],
				tabsType: 'em',
				enterpriseId: ''
			};
		},
		onLoad(option) {
			var _this = this
			let list = []
			let panduan = true
			if (option && option.sid) {
				this.sid = option.sid
			} else if (app.globalData.query.sid) {
				this.sid = app.globalData.query.sid
			}
			uni.getStorage({
				key: 'tickets',
				success: function(res) {
					console.log('成功', res)
					list = res.data
				},
				fail: function(res) {
					console.log('失败', res)
				}
			});
			console.log(list)
			console.log(this.id, this.sid)
			if (_this.uerInfo.userId) {
				_this.$http.get('/personal/center/getusercoupons/' + _this.uerInfo.userId).
				then(function(response) {
					console.log(response, "===")
					// 可用
					_this.ticket = response.data
				}).catch(function(error) {
					console.log(error);
				});
				if (this.sid && this.sid.split(',').length > 1) {
					for (let i = 0; i < list.length; i++) {
						if (_this.sid.split(',')[2] == list[i]) {
							console.log('已经使用过这个链接了：', list[i])
							panduan = false
							break
						}
					}
					if (panduan) {
						console.log('取消前:', app.globalData.query.q)
						app.globalData.query.q = ''
						console.log('取消后:', app.globalData.query.q)
						_this.$http
							.get('/personal/center/share/Coupons/' + _this.uerInfo.userId + '/' + _this.sid.split(',')[0] + '/' + _this.sid.split(
								',')[1])
							.then(function(response) {
								console.log('接受:', response)
								if (response.success) {
									list.push(_this.sid.split(',')[2])
									if (list.length > _this.num) {
										list.splice(0, 1)
									}
									console.log(list)
									uni.setStorage({ //将订单信息保存在本地
										key: 'tickets',
										data: list
									})
									uni.showToast({
										title: '接收成功',
										icon: "none"
									});
									setTimeout(function() {
										_this.$http.get('/personal/center/getusercoupons/' + _this.uerInfo.userId).
										then(function(response) {
											// 可用
											_this.ticket = response.data
										}).catch(function(error) {
											console.log(error);
										});
									}, 10);
								} else {
									uni.showToast({
										title: response.msg,
										icon: "none"
									});
								}
							})
							.catch(function(error) {
								console.log(error)
							})
					}

					// uni.showModal({
					//     title: '',
					//     content: '是否接受此优惠券？',
					// 	cancelColor: '#57BFFF',
					// 	confirmColor: '#57BFFF',
					//     success: function (res) {
					//         if (res.confirm) {
					// 			_this.$http
					// 				.post('/personal/center/share/Coupons/' + _this.uerInfo.userId + '/' + _this.sid.split(',')[0] + '/' + _this.sid.split(',')[1])
					// 				.then(function(response) {
					// 					console.log('接受:',response)
					// 					if(response.success) {
					// 						uni.showToast({
					// 							title: '接收成功',
					// 							icon:"none"
					// 						});
					// 						setTimeout(function() {
					// 							_this.$http.get('/personal/center/getusercoupons/' + _this.uerInfo.userId).
					// 							then(function (response) {
					// 								// 可用
					// 								_this.ticket = response.data
					// 							}).catch(function (error) {
					// 								console.log(error);
					// 							});	
					// 						}, 10);
					// 					} else {
					// 						uni.showToast({
					// 							title: response.msg,
					// 							icon:"none"
					// 						});
					// 					}
					// 				})
					// 				.catch(function(error) {
					// 					console.log(error)
					// 				})
					//         } else if (res.cancel) {
					//             console.log('用户点击取消');
					//         }
					//     }
					// });
				}
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '此时此刻需要您登录喔~',
					confirmText: "去登录",
					cancelText: "再逛会",
					success: res2 => {
						// loginPopupNum--;
						if (res2.confirm) {
							uni.navigateTo({
								url: "/pages/register/login"
							});
						}
					}
				});
			}

		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			let _this = this
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			console.log('分享数据', res)
			// uni.showToast({
			// icon: 'none',
			// position: 'bottom',
			// title: '分享成功'
			// })
			let sid = _this.uerInfo.userId + ',' + res.target.dataset.id + ',' + new Date().getTime()
			console.log('sid', sid)
			return {
				title: 'Bee到优惠券分享',
				path: '/pages/personal/ticket?sid=' + sid,
				imageUrl: '/static/images/img_0.png'
			}
		},
		onShareTimeline(res) {
			let _this = this
			if (res.from === 'menu') { // 来自页面内分享按钮
				console.log(res.target)
			}
			console.log('分享朋友圈进来的', res)
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '分享成功'
			})
			let sid = _this.uerInfo.userId + ',' + res.target.dataset.id + ',' + new Date().getTime()
			return {
				title: 'Bee到优惠券分享',
				path: '/pages/personal/ticket?sid=' + sid,
				imageUrl: '/static/images/img_0.png'
			}
		},
		// #endif
		methods: {
			...mapMutations(['logout']),
			shareTicket(val) {
				console.log(val)
				this.ticketId = val.id
			},
			tabSelect(e) {
				var _this = this
				_this.tabCur = e.target.dataset.id;
				_this.tabsType = e.target.dataset.type
				// _this.page = 1
				// _this.pages = 1
				_this.goods = []
			},
			use(item) {
				uni.navigateTo({
					url: '/pages/details/details-shop?sid=' + item.enterpriseId
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.list {
		margin-top: 30rpx;
	}

	.card {
		width: 686rpx;
		height: 204rpx;
		margin: 0 auto;
		color: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}

	.card image {
		width: 686rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -10;
	}

	.card .price {
		height: 204rpx;
		line-height: 204rpx;
		/* padding: 0 48rpx; */
		width: 257rpx;
		text-align: center;
		font-size: 44rpx;
		border-right: 1rpx dashed rgba(255, 255, 255, .4);
		margin-right: 30rpx;
	}

	.card .price text {
		font-size: 74rpx;
	}

	.card .cont {
		font-size: 26rpx;
		line-height: 33rpx;
		padding: 30rpx 0;
	}

	.card .cont .time {
		margin: 4rpx 0 28rpx 0;
	}

	.card .cont .state {
		/* width:104rpx; */
		text-align: center;
		height: 38rpx;
		line-height: 38rpx;
		background: linear-gradient(270deg, rgba(152, 215, 255, 1) 0%, rgba(231, 130, 233, 1) 100%);
		border-radius: 6rpx;
	}

	.card .cont .state_ex {
		min-width: 104rpx;
		background: #eee;
		color: #CFCFCF;
	}

	.list {
		width: 686rpx;
		margin-left: 32rpx;
		height: 176rpx;
		// background-color: #fff;
		margin-top: 20rpx;
		// background-image: url('../../static/images/card-ing.png');
		background-image: url('');
		background-size: 100% 100%;
		border-radius: 6rpx;
	}

	.list .fl:first-child {
		width: 320rpx;
		margin-left: 40rpx;
	}

	.list .fl:last-child {
		width: 240rpx;
		/* text-align: center; */
		font-size: 44rpx;
		// line-height: 124rpx;
		// height: 124rpx;
		margin-top: 18rpx;
		border-left: 1rpx dashed #dcdcdc;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list .fl:last-child view {
		color: #FFFFFF;
		/* font-size: 26rpx; */
	}

	.list .fl .title {
		color: #FFFFFF;
		font-size: 26rpx;
		margin-top: 30rpx;
		line-height: 37rpx;
		margin-bottom: 4rpx;
		border-bottom: 0 none;
		height: 37rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		display: flex;
	}

	.list .fl .time {
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 33rpx;
		/* margin-bottom: 28rpx; */
	}

	.list .fl .text {
		font-size: 24rpx;
		color: #FFFFFF;
		height: 68rpx;
		line-height: 33rpx;
		/* margin-bottom: 28rpx; */
	}

	.list .fl .state {
		min-width: 104rpx;
		height: 38rpx;
		line-height: 38rpx;
		text-align: center;
		border-radius: 6rpx;
		background: linear-gradient(270deg, #98d7ff 0%, #e782e9 100%);
		color: #fff;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.share {
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(#FFFFFF, 0.01);
	}

	button {
		// position: fixed;
		//    display: none;
		margin-left: 10rpx;
		margin-right: auto;
		padding: 0;
		box-sizing: border-box;
		font-size: 32rpx;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		color: #000;
		background-color: #f8f8f8;
		cursor: pointer;
	}

	uni-button {
		// position: fixed;
		//    display: none;
		margin-left: 10rpx;
		margin-right: auto;
		padding: 0;
		box-sizing: border-box;
		font-size: 32rpx;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		color: #000;
		background-color: #f8f8f8;
		cursor: pointer;
	}

	.share image {
		width: 100%;
		height: 100%;
	}


	.tab text {
		text-align: center;
		display: inline-block;
		font-size: 26rpx;
		color: #666;
		position: relative;
	}

	.tab .cur {
		font-weight: bold;
		color: #333;
	}

	.tab .cur .cur_sp1 {
		position: absolute;
		width: 30rpx;
		height: 4rpx;
		background: $uni-color1;
		border-radius: 2rpx;
		right: 32rpx;
		bottom: 0;
	}

	.tab .cur .cur_sp2 {
		position: absolute;
		width: 30rpx;
		height: 4rpx;
		background: $uni-color1;
		border-radius: 2rpx;
		right: 17rpx;
		bottom: 0;
	}

	.use {
		width: 28rpx;
		height: 95rpx;
		border: 1rpx solid #ffffff;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
</style>
